extends ../_layout

block active
  - sidebar_active = 'form-imagecrop.html'

block content
  h3 Image Cropper
    small Simple image cropping plugin.

  .container-md
    .row
      .col-lg-8
        .img-container.mb-lg
          img(src='img/mb-sample.jpg', alt='Picture')
      .col-lg-4
        .docs-preview.clearfix
          .img-preview.preview-lg
          .img-preview.preview-md
          .img-preview.preview-sm
          .img-preview.preview-xs
    .row.mt
      .col-lg-4.docs-buttons
        .mb.btn-group
          button.btn.btn-info(data-method='setDragMode', data-option='move', type='button', title='Move')
            span.docs-tooltip(data-toggle='tooltip', title='$().cropper("setDragMode", "move")')
              span.fa.fa-arrows
          button.btn.btn-info(data-method='setDragMode', data-option='crop', type='button', title='Crop')
            span.docs-tooltip(data-toggle='tooltip', title='$().cropper("setDragMode", "crop")')
              span.fa.fa-crop
          button.btn.btn-info(data-method='zoom', data-option='0.1', type='button', title='Zoom In')
            span.docs-tooltip(data-toggle='tooltip', title='$().cropper("zoom", 0.1)')
              span.fa.fa-plus-square
          button.btn.btn-info(data-method='zoom', data-option='-0.1', type='button', title='Zoom Out')
            span.docs-tooltip(data-toggle='tooltip', title='$().cropper("zoom", -0.1)')
              span.fa.fa-minus-square
          button.btn.btn-info(data-method='rotate', data-option='-45', type='button', title='Rotate Left')
            span.docs-tooltip(data-toggle='tooltip', title='$().cropper("rotate", -45)')
              span.fa.fa-arrow-left
          button.btn.btn-info(data-method='rotate', data-option='45', type='button', title='Rotate Right')
            span.docs-tooltip(data-toggle='tooltip', title='$().cropper("rotate", 45)')
              span.fa.fa-arrow-right
        .mb.btn-group
          button.btn.btn-info(data-method='crop', type='button', title='Crop')
            span.docs-tooltip(data-toggle='tooltip', title='$().cropper("crop")')
              span.fa.fa-check
          button.btn.btn-info(data-method='clear', type='button', title='Clear')
            span.docs-tooltip(data-toggle='tooltip', title='$().cropper("clear")')
              span.fa.fa-times
          button.btn.btn-info(data-method='disable', type='button', title='Disable')
            span.docs-tooltip(data-toggle='tooltip', title='$().cropper("disable")')
              span.fa.fa-lock
          button.btn.btn-info(data-method='enable', type='button', title='Enable')
            span.docs-tooltip(data-toggle='tooltip', title='$().cropper("enable")')
              span.fa.fa-unlock
          button.btn.btn-info(data-method='reset', type='button', title='Reset')
            span.docs-tooltip(data-toggle='tooltip', title='$().cropper("reset")')
              span.fa.fa-refresh
          label.btn.btn-info.btn-upload(for='inputImage', title='Upload image file')
            input#inputImage.sr-only(name='file', type='file', accept='image/*')
            span.docs-tooltip(data-toggle='tooltip', title='Import image with Blob URLs')
              span.fa.fa-upload
          //- button.btn.btn-info(data-method='destroy', type='button', title='Destroy')
          //-   span.docs-tooltip(data-toggle='tooltip', title='$().cropper("destroy")')
          //-     span.fa.fa-power-off
      .col-lg-4.docs-toggles
        .mb.btn-group.btn-group-justified.btn-group-sm(data-toggle='buttons')
          label.btn.btn-info.active(data-method='setAspectRatio', data-option='1.7777777777777777', title='Set Aspect Ratio')
            input#aspestRatio1.sr-only(name='aspestRatio', value='1.7777777777777777', type='radio')
            span.docs-tooltip(data-toggle='tooltip', title='$().cropper("setAspectRatio", 16 / 9)') 16:9
          label.btn.btn-info(data-method='setAspectRatio', data-option='1.3333333333333333', title='Set Aspect Ratio')
            input#aspestRatio2.sr-only(name='aspestRatio', value='1.3333333333333333', type='radio')
            span.docs-tooltip(data-toggle='tooltip', title='$().cropper("setAspectRatio", 4 / 3)') 4:3
          label.btn.btn-info(data-method='setAspectRatio', data-option='1', title='Set Aspect Ratio')
            input#aspestRatio3.sr-only(name='aspestRatio', value='1', type='radio')
            span.docs-tooltip(data-toggle='tooltip', title='$().cropper("setAspectRatio", 1 / 1)') 1:1
          label.btn.btn-info(data-method='setAspectRatio', data-option='0.6666666666666666', title='Set Aspect Ratio')
            input#aspestRatio4.sr-only(name='aspestRatio', value='0.6666666666666666', type='radio')
            span.docs-tooltip(data-toggle='tooltip', title='$().cropper("setAspectRatio", 2 / 3)') 2:3
          label.btn.btn-info(data-method='setAspectRatio', data-option='NaN', title='Set Aspect Ratio')
            input#aspestRatio5.sr-only(name='aspestRatio', value='NaN', type='radio')
            span.docs-tooltip(data-toggle='tooltip', title='$().cropper("setAspectRatio", NaN)') Free
        .mb.dropdown.dropup.docs-options
          button#toggleOptions.btn.btn-info.btn-block.dropdown-toggle(type='button', data-toggle='dropdown', aria-expanded='true')
            | Toggle Options
            span.caret
          ul.dropdown-menu.p(role='menu', aria-labelledby='toggleOptions')
            li.pv-sm(role='presentation')
              label.checkbox-inline
                input(type='checkbox', name='option', value='strict', checked='checked')
                |  strict
            li.pv-sm(role='presentation')
              label.checkbox-inline
                input(type='checkbox', name='option', value='responsive', checked='checked')
                |  responsive
            li.pv-sm(role='presentation')
              label.checkbox-inline
                input(type='checkbox', name='option', value='checkImageOrigin', checked='checked')
                |  checkImageOrigin
            li.pv-sm(role='presentation')
              label.checkbox-inline
                input(type='checkbox', name='option', value='modal', checked='checked')
                |  modal
            li.pv-sm(role='presentation')
              label.checkbox-inline
                input(type='checkbox', name='option', value='guides', checked='checked')
                |  guides
            li.pv-sm(role='presentation')
              label.checkbox-inline
                input(type='checkbox', name='option', value='highlight', checked='checked')
                |  highlight
            li.pv-sm(role='presentation')
              label.checkbox-inline
                input(type='checkbox', name='option', value='background', checked='checked')
                |  background
            li.pv-sm(role='presentation')
              label.checkbox-inline
                input(type='checkbox', name='option', value='autoCrop', checked='checked')
                |  autoCrop
            li.pv-sm(role='presentation')
              label.checkbox-inline
                input(type='checkbox', name='option', value='dragCrop', checked='checked')
                |  dragCrop
            li.pv-sm(role='presentation')
              label.checkbox-inline
                input(type='checkbox', name='option', value='movable', checked='checked')
                |  movable
            li.pv-sm(role='presentation')
              label.checkbox-inline
                input(type='checkbox', name='option', value='rotatable', checked='checked')
                |  rotatable
            li.pv-sm(role='presentation')
              label.checkbox-inline
                input(type='checkbox', name='option', value='zoomable', checked='checked')
                |  zoomable
            li.pv-sm(role='presentation')
              label.checkbox-inline
                input(type='checkbox', name='option', value='touchDragZoom', checked='checked')
                |  touchDragZoom
            li.pv-sm(role='presentation')
              label.checkbox-inline
                input(type='checkbox', name='option', value='mouseWheelZoom', checked='checked')
                |  mouseWheelZoom
            li.pv-sm(role='presentation')
              label.checkbox-inline
                input(type='checkbox', name='option', value='cropBoxMovable', checked='checked')
                |  cropBoxMovable
            li.pv-sm(role='presentation')
              label.checkbox-inline
                input(type='checkbox', name='option', value='cropBoxResizable', checked='checked')
                |  cropBoxResizable
            li.pv-sm(role='presentation')
              label.checkbox-inline
                input(type='checkbox', name='option', value='doubleClickToggle', checked='checked')
                |  doubleClickToggle

block vendor_css
  // CROPPER
  link(rel='stylesheet', href='../vendor/cropper/dist/cropper.css')
block vendor_js
  // CROPPER
  script(src='../vendor/cropper/dist/cropper.js')
